<template>
  <div class="View">
    <div class="page-view">
      <el-tabs v-model="activeName">
        <el-tab-pane label="Excel" name="third">
          <el-upload class="upload-demo" :action="action" :on-error="uploadFalse" :on-success="uploadSuccess">
            <el-button size="small" type="primary">Import</el-button>
          </el-upload>
          <el-button size="small" type="primary" @click="ExportExcelApi">Export</el-button>
          <el-table :data="tableData2" border style="width: 100%; margin-top: 25px">
            <el-table-column :label="$t('message.userPageTable.userName')">
              <template slot-scope="scope">
                <el-input v-model="scope.row.acc" readonly></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="name" :label="$t('message.userPageTable.name')">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="email" :label="$t('message.userPageTable.email')">
              <template slot-scope="scope">
                <el-input v-model="scope.row.email"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="type" :label="$t('message.userPageTable.userType')">
              <template slot-scope="scope">
                <span v-if="scope.row.accType == 1">{{
                  $t("message.userPageTable.admin")
                }}</span>
                <span v-if="scope.row.accType == 2">{{
                  $t("message.userPageTable.ordinaryUsers")
                }}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="footer">
            <button @click="getUserApi">Cancel</button>
            <button class="okBTn" @click="saveTableData">OK</button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="Export PDF" name="fourth">
          <el-button size="small" type="primary" @click="dialogVisible = true"
            style="width: 156px;margin-top:12px">サンプル装置</el-button><br />
          <el-button size="small" type="primary" style="width: 156px;margin-top:12px">設備リスト</el-button>
          <br />
          <el-button size="small" type="primary" style="width: 156px;margin-top:12px">設備仕様（図面）</el-button>
          <br />
          <el-button size="small" type="primary" style="width: 156px;margin-top:12px">肉厚測定結果（図面）</el-button>
          <br />
          <el-button size="small" type="primary" style="width: 156px;margin-top:12px">肉厚経年変化グラフ</el-button>
          <br />
          <el-button size="small" type="primary" style="width: 156px;margin-top:12px">検査結果（写真）</el-button>
          <el-dialog title="Tip" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"
            :append-to-body="true">
            <el-input v-model="input" placeholder="Please input the content" class="ipt"></el-input>

            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">Cancel</el-button>
              <el-button type="primary" @click="save">OK </el-button>
            </span>
          </el-dialog>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { ExportPDFUrl, getUser, ExportExcel, updateUser } from "../../api/api";
import BASE from "../../utils/base";
// 导出模块
export default {
  // 模块名字
  name: "FunctionPageView",
  // 模块数据
  data() {
    //数据
    return {
      activeName: "third",
      tableData: [],
      tableData2: [],
      columns: [],
      rows: [],
      dialogVisible: false,
      input: "",
      tableForm: {
        pageIndex: 1,
        pageSize: 6000,
        acc: "",
        name: "",
      },
      action: BASE.IP + "/api/ExcelExec/importtExcel",
    };
  },
  // 注册组件
  components: {},
  // 监听指定值，只有指定值变化，才会触发
  watch: {},
  // 里面的函数只有调用才会执行（实时计算）里面是定义的方法
  methods: {
    //文件上传失败触发
    uploadFalse(response, file, fileList) {
      this.$alert('システムエラーが発生しました。ご迷惑をお掛けして申し訳御座いません。システム管理者に問い合わせください。', '', {
        confirmButtonText: 'OK',
        type: 'warning',
      });
    },
    //文件上传成功触发
    uploadSuccess(response) {
      console.log(response, "response");
      this.getUserApi();
    },
    handleClose(done) {
      this.$confirm("Close？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    save() {
      if (this.input) {
        let dataJson = {
          fileName: "",
          title: this.input,
        };
        ExportPDFUrl(dataJson)
          .then((res) => {
            console.log(res);
            if (res.data.code != 0) {
              this.$alert(res.data.msg, '', {
                confirmButtonText: 'OK',
                type: 'warning',
              });
              return;
            }
            window.open(res.data.data);
          })
          .catch((err) => {
            console.log(err);
          })
          .finally(() => {
            this.dialogVisible = false;
          });
        // window.open(
        //   `http://60.205.176.234:8101/api/Dolphin/CreatePdfWithContent?content=${this.input}`
        // );
      }
    },
    getUserApi() {
      getUser(this.tableForm).then((res) => {
        console.log();
        this.tableData2 = res.data.data;
      });
    },
    saveTableData() {
      updateUser(this.tableData2).then((res) => {
        if (res.data.code == 0) {
          this.getUserApi();
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          return;
        }
        this.$alert(res.data.msg, '', {
          confirmButtonText: 'OK',
          type: 'warning',
        });
      });
    },
    ExportExcelApi() {
      ExportExcel().then((res) => {
        window.open(res.data.data);
      });
    },
  },
  // 创建前状态(里面是操作)
  beforeCreate() { },
  // 创建完毕状态(里面是操作)
  created() { },
  // 挂载前状态(里面是操作)
  beforeMount() { },
  // 挂载结束状态(里面是操作)
  mounted() {
    this.getUserApi();
    this.$nextTick(function () {
      if ($(".LeftMenu").width() == 64) {
        $(".View").width($(".Content").width() - 64);
      } else if ($(".LeftMenu").width() == 192) {
        $(".View").width($(".Content").width() - 192);
      }
    });
  },
  // 更新前状态(里面是操作)
  beforeUpdate() { },
  // 更新完成状态(里面是操作)
  updated() { },
  // 销毁前状态(里面是操作)
  beforeDestroy() { },
  // 销毁完成状态(里面是操作)
  destroyed() { },
};
</script>
<style lang="scss" scoped>
.View {
  width: calc(100% - 192px);
  height: 100%;

  .page-view {
    position: relative;
    height: 100%;
    margin: 16px 0 0 0;
    border-radius: 2px;
  }
}

.ipt {
  ::v-deep .el-input__inner {
    border: 1px solid #ccc;
    height: 32px;
    background: transparent;
  }
}

::v-deep .el-input__inner {
  border: 0 none;
  height: 32px;
  background: transparent;
}

.footer {
  margin-top: 50px;
  height: 32px;
  display: flex;
  justify-content: flex-end;

  button {
    width: 82px;
    height: 32px;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    text-align: center;
    line-height: 32px;
    margin-right: 16px;
  }

  .okBTn {
    background: #106ebe;
    color: #fff;
  }
}

.upload-demo {
  width: 100px;
  float: left;
}
</style>